<template>
    <div class="loginContainer">
        <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;" @click="back">返回</el-button>
        <div @click="showArea">选择省市区(只返回最末级地址，若全选返回第一级)：{{ chosedData.name }}</div>
        <RegionChose :dialogVisible="dialogVisible" :defaultItem="defaultItem" @regionBack="regionBack"></RegionChose>

    </div>
</template>
<!-- 省市区选择，el-check、postcss -->
<script lang="ts" setup>
import { ref } from 'vue'
import RegionChose from '/@/components/RegionChose.vue'

const dialogVisible = ref(false)
const defaultItem = ref([]) // 弹窗后初始值
const popType: any = ref('add') // 操作状态，新增、修改
const chosedData: any = ref( // 选中结果
    {
        name: '',
        list: []
    }
)
const showArea = () => {
    if (popType.value) {
        popType.value = 'edit'
        defaultItem.value = chosedData.value.list
    } else {
        popType.value = 'add'
        defaultItem.value = []
    }
    dialogVisible.value = true
}
const regionBack = (e: any) => {
    if (e) {
        chosedData.value = {
            list: e.codIngList, // 后端要求传coding数据
            name: e.name
        }
    }
    dialogVisible.value = false
}
const back = ()=>{
    window.history.back()
}
</script>
<style lang="scss" scoped>
.loginContainer {
    height: 100vh;
    width: 100vw;
    padding: 60px;
    margin-bottom: 10px;
    cursor: pointer;
}
</style>
  